<script setup>
    // 将函数进行封装到另一个文件
    import useWebsites from './useWebsites'
    const {webSiteStore,keywords} = useWebsites()

    import useIndex from './useIndex'
    const {currentIndex,handleItemClick} = useIndex()

    const handleDelClick = (ws)=>{
        webSiteStore.deleteItem(ws.url)
        currentIndex.value = 0
    }

</script>

<template>
    <div>
        <p id="no-item" v-if="webSiteStore.find(keywords).length <= 0">暂无数据.</p>
        <div id="items" v-else>
            <div class="read-item" 
            v-for="ws in webSiteStore.find(keywords)" 
            @click="handleItemClick(ws.url)">
                <img :src="ws.screenshot" :alt="ws.title">
                <h2>{{ws.title}}</h2>
                <!--  阻止事件冒泡-->
                <button @click.stop="handleDelClick(ws)">X</button>
            </div>
        </div>
        <div>{{keywords}}</div>
    </div>
</template>

<style lang="css">
    .read-item img{
        width: 384px;
        height: 216px;
    }
    .read-item{
        display: flex;
    }
    .read-item button{
        height: 30px;
        width: 30px;
        border-radius: 15px;
        background-color: red;
        color: white;
    }

    .select{

    }
</style>